<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="/css/scheduler.css">
    <script src="/vendors/flatpickr/flatpickr.min.js"></script>
    <script type="text/javascript" src="/js/pages/scheduler.js"></script>
  </head>
  <body>
    <!--scheduler section start-->
    <div class="panel panel-success">
      <div class="panel-heading">
        <h3 class="panel-title">Interval</h3>
      </div>
      <div class="panel panel-default" style="border:none;outline:none;margin:0;">
        <div class="panel-heading" style="padding:5px 2px;">
          <div class="edgexIconBtn">
            <i class="fa fa-plus fa-lg fa-fw" aria-hidden="true" onclick="orgEdgexFoundry.supportScheduler.addSchedulerBtn()"></i>
          </div>
          <div class="edgexIconBtn">
            <i class="fa fa-refresh fa-lg fa-fw" aria-hidden="true" onclick="orgEdgexFoundry.supportScheduler.refreshSchedulerListBtn()"></i>
          </div>
          <!-- <div class="edgexIconBtn">
            <input type="text" name="schedulerSearch" value=""><i class="fa fa-search fa-lg fa-fw" aria-hidden="true"></i>
          </div> -->
        </div>
      </div>

      <div class="panel-body" style="padding:0;">
        <div id="edgex-support-scheduler-list">
	 	 			<table class="table  table-responsive table-hover table-striped">
	 	 				<thead>
	 	 					<tr class="active">
                <th></th>
	 	 						<th></th>
	 	 						<th>#</th>
	 	 						<th>ID</th>
	 	 						<th>Schedule Name</th>
	 	 						<th>Start</th>
	 	 						<th>End</th>
	 	 						<th>Frequency</th>
	 	 						<th>Cron</th>
	 	 						<th>RunOnce</th>
	 	 						<th>Created Time</th>
	 	 						<th>Modified Time</th>
	 	 					</tr>
	 	 				</thead>
	 	 				<tbody>
	 	 				</tbody>
	 	 				<tfoot style="display:none;">
	 	 					<tr align="center">
	 	 						<td colspan=13>No Data.</td>
	 	 					</tr>
	 	 				</tfoot>
	 	 			</table>
	 	 		</div>
      </div>
      <div id="edgex-support-scheduler-add-or-update">
        <div class="panel panel-success">
          <div class="panel-heading">
            <h3 class="panel-title">Add or Update Interval</h3>
          </div>
          <div class="panel panel-default" style="border:none;outline:none;margin:0;">
            <div class="panel-heading" style="padding:5px 2px;">
              <div class="edgexIconBtn add-scheduler"  onclick="orgEdgexFoundry.supportScheduler.commitSchedulerBtn('new');">
                <i class="fa fa-check fa-lg" aria-hidden="true"></i>
              </div>
              <div class="edgexIconBtn update-scheduler" style="display:none;" onclick="orgEdgexFoundry.supportScheduler.commitSchedulerBtn();">
                <i class="fa fa-check fa-lg" aria-hidden="true"></i>
              </div>
              <div class="edgexIconBtn" onclick="orgEdgexFoundry.supportScheduler.cancelAddSchedulerBtn()">
                <i class="fa fa-close fa-lg" aria-hidden="true"></i>
              </div>
            </div>
          </div>

          <div class="panel-body" style="padding:0;">
              <form class="edgex-support-scheduler-form form-horizontal">
                  <fieldset>
                      <legend>Interval</legend>
                      <div class="form-group" style="display: none;">
                          <label class="col-md-2 control-label">ID</label>
                          <div class="col-sm-10">
                              <input type="text" class="form-control" name="schedulerId">
                          </div>
                      </div>
                      <div class="form-group">
                          <label class="col-md-2 control-label">Name</label>
                          <div class="col-sm-10">
                              <input type="text" class="form-control" name="schedulerName" placeholder="IntervalName">
                          </div>
                      </div>
                      <div class="form-group">
                          <label class="col-md-2 control-label">StartTime</label>
                          <div class="col-sm-10">
                              <input type="text" class="form-control" name="schedulerStart">
                          </div>
                      </div>
                      <div class="form-group">
                          <label class="col-md-2 control-label">EndTime</label>
                          <div class="col-sm-10">
                              <input type="text" class="form-control" name="schedulerEnd">
                          </div>
                      </div>
                      <div class="form-group">
                          <label class="col-md-2 control-label">RunOnce</label>
                          <div class="col-sm-10">
                              <select name="schedulerRunOnce" class="form-control">
                                  <option value="false">false</option>
                                  <option value="true">true</option>
                              </select>
                          </div>
                      </div>
                      <div class ="scheduler-interval-format">
                          <div class="form-group" disabled=true>
                              <label class="col-md-2 control-label">Frequency</label>
                              <div class="col-sm-10">
                                  <div class="input-group">
                                      <span class="input-group-addon">
                                          <input type="radio" name="schedulerIntervalFormatRadio" value="frequency">
                                      </span>
                                      <input type="text" class="form-control" name="schedulerFrequencyTextInput" placeholder="1.0">
                                      <span class="input-group-addon">
                                          <select name="schedulerFrequencyUnitSelect">
                                              <option value="h">Hour</option>
                                              <option value="m">Minute</option>
                                              <option value="s">Second</option>
                                          </select>
                                      </span>
                                  </div>
                              </div>
                          </div>
                          <div class="form-group">
                              <label class="col-md-2 control-label">Cron</label>
                              <div class="col-sm-10">
                                  <div class="input-group">
                                      <span class="input-group-addon">
                                          <input type="radio" name="schedulerIntervalFormatRadio" value="cron">
                                      </span>
                                      <input type="text" class="form-control" name="schedulerCronTextInput" placeholder="0 0 0/1 * * ? *">
                                  </div>
                              </div>
                          </div>
                      </div>
                  </fieldset>
              </form>
          </div>
        </div>
      </div>
    </div>
    <!--scheduler section end-->

    <!--schedule event section start-->
    <div class="edgex-support-scheduleevent-section">

      <!--schedule event list section start-->
      <div id="edgex-support-scheduleevent-list-main">
        <div class="panel panel-success" style="position:relative;">
          <div class="panel-heading">
            <h3 class="panel-title">IntervalAction</h3>
          </div>
          <div class="panel panel-default" style="border:none;outline:none;margin:0;">
            <div class="panel-heading" style="padding:5px 2px;">
              <div class="edgexIconBtn" onclick="orgEdgexFoundry.supportScheduler.addScheduleEventBtn()">
                <i class="fa fa-plus fa-lg fa-fw" aria-hidden="true"></i>
              </div>
              <div class="edgexIconBtn" onclick="orgEdgexFoundry.supportScheduler.loadScheduleEventList()">
                <i class="fa fa-refresh fa-lg fa-fw" aria-hidden="true"></i>
              </div>
              <!-- <div class="edgexIconBtn">
                <i class="fa fa-search fa-lg fa-fw" aria-hidden="true"></i>
              </div> -->
            </div>
          </div>

          <div id="edgex-support-scheduleevent-address" class="panel panel-success" style="">
            <div class="panel-heading">
              <h3 class="panel-title">
                Addressable
                <button onclick="orgEdgexFoundry.supportScheduler.hidenAdressableBtn()" type="button" class="close pull-right" aria-label="Close"><span style="color:#333!important;" aria-hidden="true">&times;</span></button>
              </h3>
            </div>
            <div class="panel-body" style="padding:0;">
              <table class="table table-responsive table-hover table-striped">
                <thead>
                  <tr class="active">
                    <th>Method</th>
                    <th>URL</th>
                  </tr>
                </thead>
                <tbody>
                </tbody>
                <tfoot style="display:none;">
                  <tr align="center">
                    <td colspan=13>No Data.</td>
                  </tr>
                </tfoot>
              </table>
            </div>
          </div>

          <div class="panel-body" style="padding:0;">
            <div id="edgex-support-scheduleevent-list">
              <table class="table table-responsive table-hover table-striped">
                <thead>
                  <tr class="active">
                    <th></th>
                    <th></th>
                    <th>#</th>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Interval</th>
                    <th>Parameters</th>
                    <th>Target</th>
                    <th>Addressable</th>
                    <th>Created Time</th>
                    <th>Modified Time</th>
                  </tr>
                </thead>
                <tbody>
                </tbody>
                <tfoot style="display:none;">
                  <tr align="center">
                    <td colspan=13>No Data.</td>
                  </tr>
                </tfoot>
              </table>
            </div>
          </div>
        </div>
      </div>
      <!--schedule event list section end-->

        <!--add or update schedule event section start-->
        <div id="edgex-support-scheduleevent-add" style="display:none;" class="panel panel-success">
            <div class="panel-heading">
                <h3 class="panel-title">Add or Update IntervalAction</h3>
            </div>
            <div class="panel panel-default" style="border:none;outline:none;margin:0;">
                <div class="panel-heading" style="padding:5px 2px;">
                    <div class="edgexIconBtn add-schedule-event"
                         onclick="orgEdgexFoundry.supportScheduler.commitScheduleEventBtn('new');">
                        <i class="fa fa-check fa-lg" aria-hidden="true"></i>
                    </div>
                    <div class="edgexIconBtn update-schedule-event" style="display:none;"
                         onclick="orgEdgexFoundry.supportScheduler.commitScheduleEventBtn();">
                        <i class="fa fa-check fa-lg" aria-hidden="true"></i>
                    </div>
                    <div class="edgexIconBtn" onclick="orgEdgexFoundry.supportScheduler.cancelAddScheduleEventBtn()">
                        <i class="fa fa-close fa-lg" aria-hidden="true"></i>
                    </div>
                </div>
            </div>
            <div class="panel-body" style="padding:0;">
                <form class="edgex-support-scheduleevent-form form-horizontal">
                    <fieldset>
                        <legend>IntervalAction</legend>
                        <div class="form-group">
                            <input type="hidden" class="form-control" name="ScheduleEventId">
                        </div>
                        <div class="form-group">
                            <label for="ScheduleEventName" class="col-md-1 control-label">Name</label>
                            <div class="col-md-11">
                                <input type="text" class="form-control" name="ScheduleEventName" placeholder="IntervalActionName">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="SchedulerName" class="col-md-1 control-label">Interval</label>
                            <div class="col-md-11">
                                <select class="form-control" name="SchedulerName"></select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="ScheduleEventService" class="col-md-1 control-label">Target</label>
                            <div class="col-md-11">
                                <select class="form-control" name="ScheduleEventService"></select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="ScheduleEventServiceAction" class="col-md-1 control-label">TargetAction</label>
                            <div class="col-md-11">
                                <select class="form-control" name="ScheduleEventServiceAction"></select>
                            </div>
                        </div>
                        <fieldset>
                            <legend>TargetConfig</legend>
                            <div class="form-group">
                                <label for="EventAddressProtocol" class="col-md-1 control-label">Protocol</label>
                                <div class="col-md-10">
                                    <input type="text" class="form-control" name="EventAddressProtocol" disabled>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="EventAddressMethod" class="col-md-1 control-label">Method</label>
                                <div class="col-md-10">
                                    <select class="form-control" name="EventAddressMethod"></select>
                                </div>
                                <div class="col-md-1">
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" name="EventAddressMethodCheck"> Enabled
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="EventAddressAddress" class="col-md-1 control-label">Address</label>
                                <div class="col-md-10">
                                    <input type="text" class="form-control" name="EventAddressAddress" placeholder="edgex-core-command">
                                </div>
                                <div class="col-md-1">
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" name="EventAddressAddressCheck"> Enabled
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="EventAddressPort" class="col-md-1 control-label">Port</label>
                                <div class="col-md-10">
                                    <input type="text" class="form-control" name="EventAddressPort" placeholder="48082">
                                </div>
                                <div class="col-md-1">
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" name="EventAddressPortCheck"> Enabled
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="EventAddressPath" class="col-md-1 control-label">Path</label>
                                <div class="col-md-10">
                                    <input type="text" class="form-control" name="EventAddressPath" placeholder="/v1/device/{id}/command/{commandid}">
                                </div>
                                <div class="col-md-1">
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" name="EventAddressPathCheck"> Enabled
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group edgex-support-scheduleevent-parameters">
                                <label for="EventAddressParameters" class="col-md-1 control-label">Parameters</label>
                                <div class="col-md-10">
                                    <textarea class="form-control" rows="3" name="EventAddressParameters" placeholder="JSON Parameters"></textarea>
                                </div>
                            </div>
                        </fieldset>
                    </fieldset>
                </form>

            </div>
        </div>
        <!--add or update schedule event section end-->

    </div>
    <!--schedule event section end-->
  </body>
</html>

